import React from 'react';
import { Steps, Card, Tag, Button } from 'antd';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';

const Container = styled(Card)`
  margin: 16px;
`;

const StatusTag = styled(Tag)`
  margin-left: 8px;
`;

// 修正步骤生成逻辑，覆盖所有状态
const getStatusSteps = (status, type) => {
  const steps = [
    { title: '申请提交', description: '售后申请已提交' },
  ];

  if (status === 'PENDING') {
    steps.push({ title: '等待审核', description: '商家正在审核中' });
  } else if (status === 'APPROVED' && type === 'refund'){
    steps.push(
        { title: '审核通过', description: '等待退款' },
    );
  }
  else if (status === 'REFUNDED' && type === 'refund') {
    steps.push(
        {title: '审核通过', description: '等待退款'},
        { title: '退款完成', description: '退款已到账' }
    );
  }


  else if (status === 'APPROVED' && type === 'return') {
    steps.push(
        { title: '审核通过', description: '请寄回商品' },
        { title: '商家收货', description: '等待商家确认收货' },
        { title: '退款完成', description: '退款已到账' }
    );
  } else if (status === 'RETURNING' && type === 'return') {
    steps.push(
        { title: '审核通过', description: '请寄回商品' },
        { title: '退货中', description: '等待商家确认收货' },
        { title: '退款完成', description: '退款已到账' }
    );
  } else if (status === 'REFUNDED' && type === 'return') {
    steps.push(
        { title: '审核通过', description: '请寄回商品' },
        { title: '退货中', description: '等待商家确认收货' },
        { title: '退款完成', description: '退款已到账' }
    );
  } else if (status === 'REJECTED') {
    steps.push({ title: '申请驳回', description: '售后申请未通过' });
  }

  return steps;
};

// 补充所有状态的颜色定义
const getStatusColor = (status) => {
  switch (status) {
    case 'PENDING': return 'orange';
    case 'APPROVED': return 'green';
    case 'RETURNING': return 'blue';
    case 'REFUNDED': return 'purple';
    case 'REJECTED': return 'red';
    default: return 'default';
  }
};

const AfterSaleStatus = ({ afterSale }) => {
  const navigate = useNavigate();
  const steps = getStatusSteps(afterSale.status, afterSale.type);

  // 修正当前步骤计算逻辑（覆盖所有状态）
  const currentStep = (() => {
    switch (afterSale.status) {
      case 'PENDING': return 1;
      case 'APPROVED': return 2;
      case 'RETURNING': return 3;
      case 'REFUNDED': return 4;
      case 'REJECTED': return 2;
      default: return 0;
    }
  })();

  return (
      <Container title="售后进度" style={{ margin:0, marginBottom:5}}>
        <div style={{ marginTop:-5}}>
          <span>售后类型：</span>
          <Tag color={afterSale.type === 'return' ? 'blue' : 'green'}>
            {afterSale.type === 'return' ? '退货退款' : '仅退款'}
          </Tag>
          <StatusTag color={getStatusColor(afterSale.status)}>
            {afterSale.status === 'PENDING' && '待审核'}
            {afterSale.status === 'APPROVED' && '等待用户退货'}
            {afterSale.status === 'RETURNING' && '退货中，等待商家确认收货'}
            {afterSale.status === 'REFUNDED' && '退货成功，已退款'}
            {afterSale.status === 'REJECTED' && '已驳回'}
          </StatusTag>
        </div>

        <Steps
            direction="vertical"
            current={currentStep}
            items={steps}
        />

        {/* 保持与 AfterSaleDetail 一致的按钮显示条件 */}
        {afterSale.status === 'APPROVED' && afterSale.type === 'return' && (
            <div style={{ marginTop: 16, textAlign: 'center' }}>
              <Button type="primary" onClick={() => navigate(`/app/after-sale/logistics/${afterSale.id}`)}>
                填写退货物流
              </Button>
            </div>
        )}
      </Container>
  );
};

export default AfterSaleStatus;